import React, { useState } from 'react';
import History from 'beta/containers/history/History';
import { HistoryFilters } from 'beta/containers/history/historyFilters';
import ContractWrapper from 'beta/containers/layout/ContractWrapper';
import { IContext } from 'beta/typings/context';
import { useRouter } from 'next/router';

const Sagan = () => {
  const router = useRouter();
  const contractId = router?.query?.contractId ?? '';
  const [filter, setFilter] = useState('All');
  const onSelect = (item: string) => {
    setFilter(item);
  };

  return (
    <ContractWrapper>
      <HistoryFilters color="purple" onSelect={onSelect} />
      <History category={filter} regardingIds={[contractId.toString()]} />
    </ContractWrapper>
  );
};

Sagan.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    contractId: query.contractId,
    namespacesRequired: ['service', 'errors'],
  };
};

export default Sagan;